<template>
  <div class="recommend">
    <banner v-if="banners" :imgs="banners"></banner>
    <list-title>编辑推荐</list-title>
    <loading v-if="recommendSongs.length == 0"></loading>
    <ul class="imgList" v-else>
      <img-item
        v-for="song in recommendSongs"
        :key="song.id"
        :song="song"
        path="/playlist"
      ></img-item>
    </ul>
    <list-title>最新音乐</list-title>
    <!-- <loading v-if="recommendSongs.length==0"></loading> -->
    <every-music
      :playMUsicID="playMUsicID"
      @play="play"
      :songlist="musicSongs"
    ></every-music>
  </div>
</template>

<script>
import ListTitle from "@/components/ListTitle.vue";
import ImgItem from "@/components/ImgItem.vue";
import EveryMusic from "../components/EveryMusic.vue";
import Banner from "@/components/Banner.vue";

export default {
  name: "Recommend",
  props: {
    playMUsicID: Number,
  },
  data() {
    return {
      recommendSongs: [],
      musicSongs: [],
      banners: null,
    };
  },
  methods: {
    play(event) {
      this.$emit("play", event);
      // this.$emit("addList",this.musicSongs)
    },
  },
  created() {
    this.$axios.get("/personalized?limit=6").then((result) => {
      // console.log(result.data.result);
      this.recommendSongs = result.data.result;
    }),
      this.$axios.get("/personalized/newsong?limit=10").then((result) => {
        // console.log(result.data.result);
        this.musicSongs = result.data.result;
      });
    this.axios.get("/banner?type=1").then((result) => {
      console.log(result.data.banners);
      this.banners = result.data.banners;
    });
  },
  components: {
    ListTitle,
    ImgItem,
    EveryMusic,
    Banner,
  },
};
</script>
<style lang="less" scoped>
.imgList {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
</style>
